<template>
  <view class="tabsBottom">
    <view class="tabs">
      <view :class="['tabItem', state.tabId2 === item.id ? 'tabsItemHover' : '']" v-for="(item, index) in tabs5" :key="index" @click="changeTab(item)">
        {{item?.name}}
      </view> 
    </view>
    <!-- 订单 -->
    <view class="newBottom" v-if="state.tabId2 ==  1">
      <view class="tabs2">
        <view :class="['tabs2Item', state.tabId === item.id ? 'tabs2ItemHover' : '']" v-for="(item,index) in orderStatus" :key="index" @click="changeTab2(item)">
          {{item?.label}}
        </view>
      </view>
      <!-- 待付款 -->
      <view class="list" v-if="state.tabId == 1">
        <view class="titles">
          <view class="text text01">名称</view>
          <view class="text text02">订单状态</view>
          <view class="text text03">价格</view>
          <view class="text text04">派单价</view>
          <view class="text text05">需结款</view>
          <view class="text text06">已结款</view>
        </view>
        <scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
          <view class="item" v-for="(item, index) in unPaidInfo?.list"  :key="index">
            <view class="text text01">
              <view class="span">{{item?.order_no}}</view>
              <view class="span02">{{item?.name}}</view>
            </view>
            <view class="text text02" style="color: rgba(0, 255, 13, 1)" v-if="item.order_status == 2">初稿</view>
            <view class="text text02" style="color: rgba(43, 90, 207, 1)" v-else-if="item.order_status == 1">定金</view>
            <view class="text text02" style="color: rgba(250, 177, 76, 1)" v-else-if="item.order_status == 3">定稿</view>
            <view class="text text02" v-else > -- </view>
            <view class="text text03">{{item?.order_price}}</view>
            <view class="text text04">{{item?.send_price}}</view>
            <view class="text text05">{{item?.price}}</view>
            <view class="text text06">{{item?.yet_send_price}}</view>
          </view>    
        </scroll-view>
        <view class="priceMain">
          <view class="btn" @click="unpaidSubmit">确认</view>
          <view class="prices">
            <view class="priceItem">
              <text>需结款</text>
              <text>{{unPaidInfo?.total_price}}</text>
            </view>
            <view class="priceItem">
              <text>已结款</text>
              <text class="text">{{unPaidInfo?.total_yet_send_price}}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 退单 -->
      <view class="list" v-if="state.tabId == 2">
        <view class="titles">
          <view class="text text01">名称</view>
          <view class="text text02">订单状态</view>
          <view class="text text03">价格</view>
          <view class="text text04">派单价</view>
          <view class="text text05">需结款</view>
          <view class="text text06">已结款</view>
        </view>
        <scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
          <view class="item tuidanItem" v-for="(item, index) in state.cancelOrderInfo?.list" :key="index">
            <view class="text text01">
              <view class="span">{{item?.order_no}}</view>
              <view class="span02">{{item?.name}}</view>
            </view>
            <view class="text text02" style="color:rgba(255, 11, 11, 1)">退单</view>
            <view class="text text03">{{item?.price}}</view>
            <view class="text text04">{{item?.send_price}}</view>
            <view class="text text05">{{item?.xu_send_price}}</view>
            <view class="text text06">{{item?.yet_send_price}}</view>
          </view>    
        </scroll-view>
      </view>
    </view>
    <!-- 老师 -->
    <view class="newBottom" v-if="state.tabId2 == 2">
      <view class="teacherList">
        <view class="teacherItem" v-for="(item, index) in state.teacherUnpaid?.list" :key="index" @click="teacherPopup(item)">
          <view class="left">
            <image :src="item?.head_img" />
            <view class="subRight">
              <view class="h3">{{item?.nickname}}</view>
              <view class="p">ID:{{item?.teacher_id}}</view>
            </view>
          </view>
          <view class="right">
            <view class="rightItem">
              <text>已结款</text>
              <view class="span">{{item?.teacher_yet_price}}</view>
            </view>
            <view class="rightItem">
              <text>当前需结款</text>
              <view class="span">{{item?.price}}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="priceMain">
        <view class="btn" @click="paidTeacher">已结款</view>
        <view class="prices">
          <view class="priceItem">
            <text>需结款</text>
            <text>{{state.teacherUnpaid?.total_price || 0}}</text>
          </view>
          <view class="priceItem">
            <text>已结款</text>
            <text class="text">{{state.teacherUnpaid?.yet_price || 0}}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 数据 -->
    <view class="newBottom" v-if="state.tabId2 == 3">
      <view class="numsMain">
        <view class="numsTitle">研汇收入</view>
        <view class="numsBottom">
          <view class="numsItem">
            <view class="h3">总款项</view>
            <view class="subNumsItem">
              <view class="span">工:</view>{{state.statisticsInfo?.yanhui?.gong_order_price}}<view class="span">元</view>
            </view>
            <view class="subNumsItem">
              <view class="span">文:</view>{{state.statisticsInfo?.yanhui?.wen_order_price}}<view class="span">元</view>
            </view>
          </view>
          <view class="numsItem">
            <view class="h3">订单数</view>
            <view class="subNumsItem">
              <view class="span">工:</view>{{state.statisticsInfo?.yanhui?.gong_order_num}}<view class="span">元</view>
            </view>
            <view class="subNumsItem">
              <view class="span">文:</view>{{state.statisticsInfo?.yanhui?.wen_order_num}}<view class="span">元</view>
            </view>
          </view>
          <view class="numsItem">
            <view class="h3">已结款</view>
            <view class="subNumsItem">
              <view class="span">工:</view>{{state.statisticsInfo?.yanhui?.gong_yet_price}}<view class="span">元</view>
            </view>
            <view class="subNumsItem">
              <view class="span">文:</view>{{state.statisticsInfo?.yanhui?.wen_yet_price}}<view class="span">元</view>
            </view>
          </view> 
        </view>
      </view>
      <!-- 工资支出 -->
      <view class="numsMain">
        <view class="numsTitle">工资支出</view>
        <view class="numsBottom">
          <view class="numsItem">
            <view class="h3">总款项</view>
            <view class="subNumsItem">
              <view class="span">工:</view>{{state.statisticsInfo?.gongzi?.gong_order_price}}<view class="span">元</view>
            </view>
            <view class="subNumsItem">
              <view class="span">文:</view>{{state.statisticsInfo?.gongzi?.wen_order_price}}<view class="span">元</view>
            </view>
          </view>
          <view class="numsItem">
            <view class="h3">订单数</view>
            <view class="subNumsItem">
              <view class="span">工:</view>{{state.statisticsInfo?.gongzi?.gong_order_num}}<view class="span">元</view>
            </view>
            <view class="subNumsItem">
              <view class="span">文:</view>{{state.statisticsInfo?.gongzi?.wen_order_num}}<view class="span">元</view>
            </view>
          </view>
          <view class="numsItem">
            <view class="h3">已结款</view>
            <view class="subNumsItem">
              <view class="span">工:</view>{{state.statisticsInfo?.gongzi?.gong_yet_price}}<view class="span">元</view>
            </view>
            <view class="subNumsItem">
              <view class="span">文:</view>{{state.statisticsInfo?.gongzi?.wen_yet_price}}<view class="span">元</view>
            </view>
          </view> 
        </view>
      </view>
    </view>
  </view>
  <uni-popup type="center" ref="teacherRef">
    <view class="pop-content">
      <uni-icons type="close" size="30" class="icons" color="rgba(254, 34, 34, 1)"></uni-icons>
      <view class="title">
        kz14487 单片机的开关灯设计
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
  import { ref, reactive, nextTick, watch } from 'vue'
  import { orderStatus, tabs5 } from '../data'
  import { adminFinanceOrder, adminFinancePay, adminFinanceTeacher, adminFinanceStatistics, teacherPay } from '@/utils/admin.js'
  import { onShow } from '@dcloudio/uni-app'
  import { financeOrderStatus }  from '@/utils/contanst.js'
  import { getCancelList } from '@/utils/front.js'
  const state = reactive({
    tabId : 1,
    tabId2 : 1,
    page: 1,
    cancelPage: 1,
    cancelOrderInfo: {},
    teacherUnpaid: {},
    teaPageNo:1
  })
  const emits = defineEmits(['getStatisticsFun','getUnpaidFun'])
  const props = defineProps({
    searchValue: {
      type: String,
      default: () => ""
    },
    unPaidInfo: {
      type: Object,
      default: () => ({})
    }
  }) 
  // 给老师结款
  const paidTeacher = () => {
    teacherPay().then((res) => {
      if (res?.code == 1) {
        getTeacherUnpaid()
      }  
    })
  }
 
  // 财务-数据
  const getStatisticsFun = ({page}) => {
    let params = {
      page: page,
      limit: 20
    }
    adminFinanceStatistics(params).then((res) => {
      if (res?.code == 1) {
        state.statisticsInfo = res?.result
      }
    })
  }

  // 财务-订单-待结款-确认
  const unpaidSubmit = () => {
    let params = {
      page: 1,
      limit: 20
    }
    adminFinancePay(params).then((res) => {
      if (res?.code == 1) {
        state.page = 1
        nextTick(() => {
          emits('getUnpaidFun',{tabId: 1, page: 1})
        })
      } 
    })
  }
  const getLabelByValue = (value) => {
    const item = financeOrderStatus.find(item => item.value === value)
    return item ? item.label : '未知状态'
  }
  // 财务-老师-待结款
  const getTeacherUnpaid = () => {
    let params = {
      search: props.searchValue,
      page: state.teaPageNo,
      limit: 20
    }
    adminFinanceTeacher(params).then((res) => {
      if (res?.code == 1) {
        state.teacherUnpaid = res?.result
      } 
    })  
  }
  // 财务-订单-退款
  const getCancelFun = () => {
    let params = {
      page: state.cancelPage,
      limit: 20
    }
    getCancelList(params).then((res) => {
      if (res?.code == 1) {
        state.cancelOrderInfo = res?.result
      }
    })
  }
  
  const upper = (e) => {
  	console.log(e)
  }
  const lower = (e) => {
    console.log(e)
  }
  const scroll = (e)=> {
    console.log(e)
  }
  const changeTab2 = (item) => {
    state.tabId = item.id 
    nextTick(() => {
      if (item.id == 1) {
        emits('getUnpaidFun', {tabId: 1, page: 1})
      } else {
        getCancelFun()
      }
    })
  }
  const changeTab = (item) => {
    state.tabId2 = item.id
    nextTick(() => {
      if (item?.id == 1) {
        emits('getUnpaidFun',{tabId: 1, page: 1})
      } else if (item?.id == 2) {
        getTeacherUnpaid()
      } else if (item?.id == 3) {
        getStatisticsFun({page: 1})
      }
    }) 
  }
</script>

<style lang="scss" scoped>
  .tabsBottom{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30rpx;
    width: 714rpx;
    .tabs{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      // margin-top: 20rpx;
      padding-bottom: 10rpx;
      border-bottom: 2rpx solid rgba(65, 65, 65, 1);
      width: 698rpx;
      .tabItem{
        height: 48rpx;
        border-radius: 6rpx;
        background: rgba(209, 218, 243, 1);
        border: 2rpx solid rgba(122, 122, 122, 1);
        font-family: HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 40rpx;
        padding:10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left:20rpx;
        margin-right:20rpx;
      }
      .tabsItemHover{
        color: rgba(11, 105, 218, 1);
      }
      .tab2Item{
        width: 64rpx;
        height: 34rpx;
        border-radius: 6rpx;
        background: rgba(209, 218, 243, 1);
        border: 2rpx solid rgba(111, 114, 116, 1);
        font-family: HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 24rpx;
        color: rgba(111, 114, 116, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20rpx;
      }
      .tab2ItemHover{
        background: rgba(209, 218, 243, 1);
        border: 2rpx solid rgba(11, 105, 218, 1);
        color: rgba(11, 105, 218, 1);
      }
    }
    .newBottom{
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 750rpx;
      .teacherList{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        .teacherItem{
          width: 714rpx;
          height: 122rpx;
          border-radius: 14rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #ffffff;
          margin-top: 20rpx;
          .left{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            margin-left: 20rpx;
            image{
              width: 102rpx;
              height: 102rpx;
              border-radius: 100%;
            }
            .subRight{
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-left: 10rpx;
              .h3{
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 32rpx;
                color: rgba(70, 70, 70, 1);
              }
              .p{
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: rgba(169, 169, 169, 1);
              }
            }
          }
          .right{
            display: flex;
            flex-direction: row;
            align-items: center;
            .rightItem{
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              border-right: 2rpx dashed rgba(146, 146, 146, 1);
              padding-left: 30rpx;
              padding-right: 30rpx;
              text{
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 16rpx;
                color: rgba(35, 35, 35, 0.52);
              }
              .span{
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 30rpx;
                color: rgba(62, 62, 62, 1);
              }
            }
            .rightItem:nth-last-child(1){
              border: none;
            }
          }
        }
      }
      // 数据样式
      .numsMain{
        width: 714rpx;
        height: 266rpx;
        border-radius: 14rpx;
        background: rgba(255, 255, 255, 1);
        display: flex;
        flex-direction: column;
        margin-top: 20rpx;
        .numsTitle{
          margin-left: 20rpx;
          margin-top: 20rpx;
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 15px;
          color: rgba(35, 35, 35, 1);
        }
        .numsBottom{
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-around;
          margin-top: 20rpx;
          width: 100%;
          .numsItem{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            .h3{
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: rgba(35, 35, 35, .52);
            }
            .subNumsItem{
              margin-left: 20rpx;
              font-family: PingFang SC;
              font-weight: 600;
              font-size: 40rpx;
               color: rgba(35, 35, 35, 1);
               display: flex;
               flex-direction: row;
               align-items: center;
               justify-content: flex-start;
              .span{
                font-family: HarmonyOS Sans SC;
                font-weight: 400;
                font-size: 24rpx;
                margin-right: 10rpx;
                margin-left: 10rpx;
              }
            }
          }
        }
      }
    }
    .tabs2{
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 100%;
      border-bottom: 2rpx solid rgba(65, 65, 65, 1);
      padding-bottom:30rpx;
      padding-top: 20rpx;
      .tabs2Item{
        width: 156rpx;
        height: 48rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 6rpx;
        border: 2rpx solid rgba(107, 107, 107, 1); 
        font-family: HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 24rpx;
        color: rgba(122, 122, 122, 1);
        margin-left: 30rpx;
        margin-right: 30rpx;
      }
      .tabs2ItemHover{
        border: 2rpx solid rgba(11, 105, 218, 1);
        background: rgba(209, 218, 243, 1);
        color: rgba(11, 105, 218, 1);
      }
    }
    .list{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20rpx;
      .titles{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        .text{
          font-family: HarmonyOS Sans SC;
          font-weight: 400;
          font-size: 24rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          color: rgba(122, 122, 122, 1);
        }
        .text01{
          width: 180rpx;
        }
        .text02{
          width: 106rpx;
        }
        .text03{
          width: 106rpx;
        }
        .text04{
          width: 106rpx;
        }
        .text05{
          width: 106rpx;
        }
        .text06{
          width: 106rpx;
        }
      }
      .scroll-Y{
        width: 100%;
        height: calc(100vh - 550px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow: hidden;
        .item{
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: row;
          background: #ffffff;
          border: 2rpx solid rgba(135, 255, 124, 1);
          box-sizing: border-box;
          height: 82rpx;
          margin-top: 20rpx;
          border-radius: 6rpx;
          .text{
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 24rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgba(122, 122, 122, 1);
          }
          .text01{
            width: 180rpx;
            display: flex;
            flex-direction: column;
            .span01{
              font-family: HarmonyOS Sans SC;
              font-weight: 400;
              font-size: 20rpx;
              text-align: center;
              color: rgba(60, 60, 60, 1);
            }
            .span02{
              width: 180rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-family: HarmonyOS Sans SC;
              font-weight: 400;
              font-size: 20rpx;
              text-align: center;
              color: rgba(60, 60, 60, 1);
            }
          }
          .text02{
            width: 106rpx;
          }
          .text03{
            width: 106rpx;
          }
          .text04{
            width: 106rpx;
          }
          .text05{
            width: 106rpx;
          }
          .text06{
            width: 106rpx;
          }
        }
        .tuidanItem{
          border: 2rpx solid rgba(255, 11, 11, 1)
        }
      }
      // 总计
      .totalScroll{
        height: calc(100vh - 500px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        .totalItem{
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          padding-left: 20rpx;
          padding-right: 20rpx;
          width: 614rpx;
          height: 142rpx;
          border-radius: 14rpx;
          background: #ffffff;
          .text01{
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text{
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 16rpx;
              text-align: center;
              color: rgba(35, 35, 35, 0.52);
            }
            .span{
              font-family: PingFang SC;
              font-weight: 600;
              font-size: 32rpx;
              text-align: center;
              color: rgba(62, 62, 62, 1);
              margin-top:10rpx;
            }
          }
        }
      } 
    }
    .priceMain{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      height: 94rpx;
      margin-top: 20rpx;
      .btn{
        width: 184rpx;
        height: 84rpx;
        border-radius: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 40rpx;
        color: rgba(83, 83, 83, 1);
        background: rgba(135, 255, 124, 1);
        margin-right: 30rpx;
      }
      .prices{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        min-width: 212rpx;
        height: 92rpx;
        border-radius: 10rpx;
        background: #ffffff;
        .priceItem{
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-right: 20rpx;
          text{
            
          }
        }
      }
    }
  }
  .pop-content{
    width: 612rpx;
    height: 600rpx;
    border-radius: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background:#ffffff;
    flex-direction: column;
    position: relative;
    padding-bottom: 30rpx;
    .icons{
      position: absolute;
      right: 30rpx;
      top: 20rpx;
    }
    .title{
      font-family: HarmonyOS Sans SC;
      font-weight: 400;
      font-size: 20rpx;
      text-align: center;
      color: rgba(60, 60, 60, 1);
      margin-top: 30rpx;
    }
  }
</style>